<div>
  <div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
    <d-demo-nav [navItems]="navItems"></d-demo-nav>
    <div class="devui-demo-example" [dAnchor]="'basic-usage'">
      <div class="devui-demo-title">{{ 'components.carousel.basicDemo.title' | translate }}</div>
      <d-codebox id="components-carousel-default" [sourceData]="CarouselBasicComponent">
        <d-carousel-demo-basic demo></d-carousel-demo-basic>
      </d-codebox>
    </div>
    <div class="devui-demo-example" [dAnchor]="'trigger-usage'">
      <div class="devui-demo-title">{{ 'components.carousel.triggerDemo.title' | translate }}</div>
      <div class="devui-demo-text">
        {{ 'components.carousel.triggerDemo.description' | translate }}
      </div>
      <d-codebox id="components-carousel-trigger" [sourceData]="CarouselTriggerComponent">
        <d-carousel-demo-trigger demo></d-carousel-demo-trigger>
      </d-codebox>
    </div>
    <div class="devui-demo-example" [dAnchor]="'autoplay-usage'">
      <div class="devui-demo-title">{{ 'components.carousel.autoplayDemo.title' | translate }}</div>
      <d-codebox id="components-carousel-autoplay" [sourceData]="CarouselAutoplayComponent">
        <d-carousel-demo-autoplay demo></d-carousel-demo-autoplay>
      </d-codebox>
    </div>
    <div class="devui-demo-example" [dAnchor]="'custom-usage'">
      <div class="devui-demo-title">{{ 'components.carousel.customDemo.title' | translate }}</div>
      <d-codebox id="components-carousel-custom" [sourceData]="CarouselCustomComponent">
        <d-carousel-demo-custom demo></d-carousel-demo-custom>
      </d-codebox>
    </div>
  </div>
</div>
